<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>UAV</title>
    <link rel="icon" href="../../favicon.ico">
    <style>
        body {
            align-items: flex-start;
            justify-content: center;
            display: flex;
            flex-direction: column;
            background-color: #000000;
        }

        #title {
            color: #cecece;
            font-size: 1.5rem;
            width: 90%;
            display: block;
            padding: 0.5rem;
            font-weight: bold;
        }

        .container {
            display: flex;
            flex-direction: column;
            width: 96%;
            left: 1%;
            color: #cecece;
            background-color: rgba(255, 255, 255, 0.1);
            margin: 1%;
            padding: 1%;
        }

        .itemContainer {
            width: 100%;
            display: flex;
            flex-direction: row;
        }

        .item {
            width: 6rem;
            height: 3rem;
            background-color: rgba(255, 255, 255, 0.2);
            font-size: 1.4rem;
            font-weight: bold;
            color: #cecece;
        }

        .image {
            margin-left: 2rem;
            object-fit: contain;
            max-width: min-content;
            margin-bottom: 1rem;
            margin-top: 1rem;
            border-radius: 0.5rem;
        }
    </style>
</head>

<body>
    <div id="title">
        <h1>操作说明-训练关卡</h1>
        训练关卡相关的操作说明，以及关卡内必要的讲解。
    </div>

    <div class="container">
        <div class="itemContainer">
            <button id="nextSection" class="item">下一节</button>
        </div>
    </div>

    <div class="container">
        <img class="image" src="./assets/images/doc1.jpg">
        进入场景时的画面如上。关于无人机的飞行控制：
        <p>
            对于PC，键盘的WSAD对应前后左右平移，同时左半部分屏幕的上下左右滑动也对应前后左右平移，
            右半部分屏幕的上下左右滑动（鼠标的或非鼠标的）对应上下左右转动视角；
        </p>
        <p>
            对于移动设备，左半部分屏幕的上下左右滑动对应前后左右平移，右半部分
            屏幕的上下左右滑动对应上下左右转动视角；
        </p>
        <p>
            对于VR头盔，标准控制器的摇杆前后左右对应前后左右平移。
        </p>
        <img class="image" src="./assets/images/doc11.jpg">
        训练关卡为搜寻与歼灭，敌人位于默认画面前方（如上），
        敌人会自动前行，当无人机靠近时，敌人会进入警戒状态，若一定时间后仍处于警戒状态或附近有爆炸时，敌人会奔跑躲避，为降低训练关卡难度，
        此小节的敌人会在到达区域边界时自行返回（区域大小约一平方公里）。
        <img class="image" src="./assets/images/doc2.jpg">
        上图所示按钮为快速切换视角到后方，可以使VR头盔使用者不需转身便可切换视角到后方，所有支持的平台都有此功能。
        <img class="image" src="./assets/images/doc3.jpg">
        上图所示按钮为切换沉浸模式，只有支持沉浸模式的设备（如VR头盔）才有此功能。
        <img class="image" src="./assets/images/doc4.jpg">
        上图所示按钮为投掷炸弹，无人机载弹量为两枚，投掷完后，此按钮会消失，为降低训练关卡难度，投掷完所有炸弹后会自动重新装弹，重装时间为40秒，
        重装完毕后此按钮会再次显示，所以，此按钮亦可用于判断当前是否有炸弹可用。除了此按钮具有投掷功能外，空格键（PC键盘设备）和squeeze键（VR标准控制器）
        也是投掷功能。
        <img class="image" src="./assets/images/doc8.jpg">
        上图屏幕中心的十字标并不等同于一般fps游戏的瞄准点，简易改装的战斗无人机并无这样的功能，十字标仅仅是视角中心的参考标记，不过在正确投掷炸弹时也能起到
        辅助瞄准的作用。
        <img class="image" src="./assets/images/doc9.jpg">
        如上图，即便投掷方法正确，炸弹也不一定能正好落在中心位置，因为每次进入关卡，都会有不同的风速与风向，另外，不要忘记无人机飞行的速度变化以及惯性带来的影响。
        <img class="image" src="./assets/images/doc10.jpg">
        最后，当无人机飞离允许的区域范围时，会弹出上图所示的警告，并开始10秒倒计时，在计时未结束返回区域的，可继续进行，没能返回区域的，
        将进行评价结算并禁用必要操作。
    </div>

    <script src="./assets/index.js"></script>

</body>

</html>